<template>
	
	<div>
		
		<div class="free_column" @click="toList(index)" v-for="(item,index) in newList">
			
			<div class="column_img">
				<img :src="item.cover_pic"/>
			</div>
			<div class="column_bottom" style="padding-bottom: 0.5rem;">
				<flexbox >
			      <flexbox-item :span="8"><div class="flex-demo">
			      	<flexbox>
				      <flexbox-item :span="9"><div class="flex-demo" style="text-align: left;padding-left:0.5rem;">
				      	<flexbox>
							    <flexbox-item :span="2"><div class="flex-demo"><img class="userImg" :src="item.image"/></div></flexbox-item>
							    <flexbox-item><div class="flex-demo" style="text-align: left;"><div class="f15" style="font-size: 0.9rem;width: 7.5rem;overflow: hidden;height: 1.5rem;">{{item.name}}</div></div></flexbox-item>
							</flexbox>
				      </div></flexbox-item>
				      <flexbox-item><div class="flex-demo" style="text-align: right;color: #6C6A6B;font-size: 0.9rem;">第{{item.num}}节</div></flexbox-item>
				    </flexbox>
			      </div></flexbox-item>
			      <flexbox-item><div class="flex-demo" style="color:#910A81 ;font-size: 0.95rem;">免费</div></flexbox-item>
			   </flexbox>
			    <flexbox>
			      <flexbox-item :span="8"><div style="padding-top: 5px;padding-left: 0.5rem;">
			      	{{item.title}} 
			      </div></flexbox-item>
			      <flexbox-item>
			      	<div v-if="item.total_lesson !=0" class="flex-demo section">共{{item.total_lesson}}节</div>
			      	<div v-else="" class="flex-demo section">无限集</div>
			      </flexbox-item>
			    </flexbox>
			    <div style="padding-left: 10px;margin-top: 10px;color: #C7C7C7;font-size: 0.9rem;">
			    	<span>{{item.showtime}}更新</span>
			        <span style="margin-left: 20px;">时长：{{item.length_time}}</span>
			    </div>
			    
			</div>
		</div>
		
		<div @click="toHome" style="z-index: 9999999;position: fixed;bottom:3rem;left: 0.5rem;">
					
			<img src="../../static/image/shouye.png" style="width: 3rem;"/>
			
		</div>
		
	</div>
	
	
	
	
	
	
</template>

<script>
	
	import { base64} from 'vux'
	
	export default {
		
		components: {         
            base64
		},
		
		data(){
			return{
				
				list:'',
				access_token:'',
				
				
			    newList:[]
			}
		},
		
		methods:{
			
			//返回首页
			toHome(){
				
				this.$router.push({ path: '/'});
				
			},
			
			//获取详情
		    getDetail(){
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.get(this.$store.state.api + 'index/free&access_token=' + this.access_token)
		    	.then((response) => {
		    		
		    		console.log(response)
				
				if(response.body.code == 0) {
					
					this.list = response.body.data.freeSectionList
					
					console.log(this.list)
					
					for(var i = 0 ; i < response.body.data.freeSectionList.length ; i ++){
						
						this.newList.push(this.list[i])
						
					}
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
					
				}, (response) => {
	                 
	                 
				});
		    },
		    
		    
		    //触底加载
//		    onScrollBottom:function(){
//		      
//		      if (this.onFetching) {
//		        // do nothing
//		      } else {
//		        
//		        
//		        
//		        console.log('开始')
//		        
//		        this.page = this.page + 1;
//		        
//		        console.log(this.page)
//		        
//		        this.getDetail();
//		        
//		        this.loading = true;
//		        
//		        
//		        
//		      this.onFetching = false
//		        setTimeout(() => {
//		
//		
////		        this.info = this.info.concat(this.info);
//		        this.onFetching = false
//		          console.log('结束')
//		          this.loading = false;
//		        }, 500)
//		        
//		      }
//		    },
			
			//跳转到列表页
			toList:function(index){
				
				var lesson_id = this.list[index].id
				
				this.$router.push({ path: '/free',name:'free',params:{lesson_id:lesson_id}})
				
			},
			
			//获取地址栏信息
		getUrlStr(name){
	      let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)","i");
	      if(reg.test(window.location.href)){
	        return unescape(RegExp.$2.replace(/\+/g," "))
	      }
	      return undefined
	    },
		},
		
		mounted(){
			
			var access_token = this.getUrlStr('access_token');
           var parentId = this.getUrlStr('parent_id');
           
            if(parentId == undefined){
              parentId = 0;
           }
           
           var uid = this.getUrlStr('uid');
           
           if(parentId.toString().indexOf('?') > 0){
           	 parentId = parentId.split('?')[0];
           }
           
           var locurl = location.href;
           locurl = base64.encode(locurl.split('?')[0]);
           
       
           if(access_token != undefined){
         
              localStorage.setItem("access_token",access_token); 
              localStorage.setItem("parent_id",this.getUrlStr('uid'));


           }
           
            if(localStorage.getItem('access_token') != null){
         
              this.$root.registerjudge();
              this.$root.getShare();
              
            }else{
            	
        	  this.$root.gotoWechat(locurl,parentId);
            }
           
    	   this.access_token = localStorage.getItem('access_token');
			
			this.getDetail()
			
		}
		
		
	}
	
	
	
	
	
	
</script>

<style>
	
	
	
	.column_top{
		border-bottom: solid 1px #e3e3e3;
    	/*padding-left: 10px;*/
    	padding: 5px 10px;
	}
	.free_column{
		background: #FFFFFF;
	}
	
	
</style>